<template>
	<a-layout style="height: 100vh ;" >
		<a-layout-sider  v-model:collapsed="collapsed" :trigger="null" collapsible :style="menuColor" >
			<div class="logo" />
			<a-menu v-model:selectedKeys="selectedKeys" :theme="themes" mode="inline" @select='selectMenuItem'>
				<a-menu-item key="1">
					<FormatPainterOutlined />
					<span>编辑器</span>
					<router-link to="/" />
				</a-menu-item>
				<a-menu-item key="2">
					<AppstoreOutlined />
					<span>个人模板</span>
					<router-link to="/iTemplate" />
				</a-menu-item>
				<a-menu-item key="3">
					<AppstoreAddOutlined />
					<span>推荐模板</span>
					<router-link to="/rTemplate" />
				</a-menu-item>
				<a-menu-item key="4">
					<TagOutlined />
					<span>个人素材</span>
					<router-link to="/iFootage" />
				</a-menu-item>
				<a-menu-item key="5">
					<TagsOutlined />
					<span>推荐素材</span>
					<router-link to="/rFootage" />
				</a-menu-item>
				<a-menu-item key="6">
					<HourglassOutlined />
					<span>分格转换器</span>
					<router-link to="/styleChange" />
				</a-menu-item>

			</a-menu>
      <a-layout
          :class="menuTheme"
          style="bottom: 48px;"
          @click="changeTheme()"
      >
        <BulbOutlined />
      </a-layout>
			<a-layout
          :class="menuTheme"
          style="bottom: 24px;"
				@click="showDrawer()">
				<UserOutlined />
			</a-layout>
			<a-layout
          :class="menuTheme"
          style="bottom: 0px"
				@click="() => (collapsed = !collapsed)">
				<menu-unfold-outlined v-if="collapsed" class="trigger" />
				<menu-fold-outlined v-else class="trigger" />
			</a-layout>
		</a-layout-sider>
		<a-layout>
			<a-layout-content class="mainView" :style="{ margin: '0px', paddingTop: '0px', background: '#fff' }">
				<router-view style="color:black"></router-view>
			</a-layout-content>
		</a-layout>
	</a-layout>
  <a-drawer v-if="hastoken" v-model:open="open" title="已经登录" width="520" :closable="false"
            :footer-style="{ textAlign: 'right' }" @close="onClose">
    用户：{{this.phone}}
    <div style="margin-top: 10px;">
      <a-button style="" type="primary" @click="outlogin">退出登录</a-button></div>
  </a-drawer>
	<a-drawer v-if="!hastoken" v-model:open="open" title="登录" width="520" :closable="false"
		:footer-style="{ textAlign: 'right' }" @close="onClose">
		账号：<a-input v-model:value="phone"></a-input>
		密码：<a-input v-model:value="password" type="password"></a-input>
		<div style="margin-top: 10px;">
		<a-button style="" type="primary" @click="login">登录</a-button>
		<a-button style="position: fixed;right: 25px;" type="primary" @click="showChildrenDrawer">注册</a-button>
		</div>
		<a-drawer v-model:open="childrenDrawer" title="注册" width="480" :closable="false">
			账号（手机号码）：<a-input v-model:value="phone"></a-input>
			密码：<a-input v-model:value="password" type="password"></a-input>
			确认密码：<a-input v-model:value="surePassword" type="password"></a-input>
			<a-button style="margin-top: 10px;" type="primary" @click="register">注册</a-button>
		</a-drawer>

		<!-- <template #footer>
			<a-button style="margin-right: 8px" @click="onClose">Cancel</a-button>
			<a-button type="primary" @click="onClose">Submit</a-button>
		</template> -->
	</a-drawer>
</template>

<script>
	// @ is an alias to /src
	// import HelloWorld from '@/components/HelloWorld.vue'
	import {
		MenuUnfoldOutlined,
		MenuFoldOutlined,
		TagOutlined,
		TagsOutlined,
		AppstoreOutlined,
		AppstoreAddOutlined,
		HourglassOutlined,
		FormatPainterOutlined,
		UserOutlined,
    BulbOutlined,
	} from '@ant-design/icons-vue';
  import {useStore} from "vuex";
  export default {
		data() {
			return {
				selectedKeys: ['1'],
				collapsed: false,
				open: false,
				childrenDrawer: false,
        themes: 'dark',
        menuTheme: 'aLay',
        menuColor: '',
        hastoken: false,
        sto : useStore(),
        phone:'',
        password:'',
        surePassword:'',
			}
		},
		name: 'HomeView',
		components: {
			// HelloWorld,
			TagOutlined,
			TagsOutlined,
			AppstoreOutlined,
			AppstoreAddOutlined,
			HourglassOutlined,
			FormatPainterOutlined,
			MenuUnfoldOutlined,
			MenuFoldOutlined,
			UserOutlined,
      BulbOutlined,
		},
    mounted() {
      // let store = useStore()
      this.sto.dispatch('updateInfoSaync','')
      // console.log(sessionStorage.getItem('store'))
      console.log(this.$store.state.token)
      if(this.$store.state.token != ''){
        this.hastoken = true
      }
    },
    methods: {
      changeTheme(){
        if(this.themes=='light'){
          this.themes = 'dark'
          this.menuTheme = 'aLay'
          this.menuColor = ''
          this.$store.state.menuColor = 'background-color: #00152a'
        }else{
          this.themes = 'light'
          this.menuTheme = 'aLayLight'
          this.menuColor = 'background-color: rgb(253, 253, 254)'
          this.$store.state.menuColor = 'background-color: rgb(253, 253, 254)'
        }
      },
			selectMenuItem(item, key) {
				this.$router.push({
					path: key
				})
			},
			showDrawer() {
				this.open = true;
				console.log("111111111")
			},
			onClose() {
				this.open = false;
			},
			showChildrenDrawer() {
				this.childrenDrawer = true;
			},
      register(){
        if((this.password == this.surePassword)&&phone(this.phone)){
          this.$http.post(
              'api/posterEditor/register/',
              {
                user_phone:this.phone,
                user_password:this.password
              }).then((res)=>{
                console.log(res.data)
                confirm(res.data.message)
              }
          )
        }else{
          let errorPhone =  confirm('电话号码格式错误');
        }


        function phone(TEL) {
          var strTemp = /^1[34578]\d{9}$/;
          return strTemp.test(TEL);
        }
      },
      login(){
        this.$http.post(
            'api/posterEditor/login/',
            {
              user_phone:this.phone,
              user_password:this.password,
            }
        ).then(res => {
          console.log(res)
          if (res.data.code == 0){
            confirm(res.data.message)
          }else{
            this.$store.state.token = res.data.token
            this.hastoken = true
            console.log('1111111111111111111111111111')
            console.log(this.$store.state.token)
            this.sto.dispatch('updateInfoSaync','')
          }
        })
      },
      outlogin(){
        this.hastoken = false
        this.$store.state.token = ''
        this.sto.dispatch('updateInfoSaync','')

      },
		}
	}
</script>
<style>
	#components-layout-demo-custom-trigger .trigger {
		font-size: 18px;
		line-height: 64px;
		padding: 0 24px;
		cursor: pointer;
		transition: color 0.3s;
	}

	#components-layout-demo-custom-trigger .trigger:hover {
		color: #1890ff;
	}

	#components-layout-demo-custom-trigger .logo {
		height: 32px;
		background: rgba(255, 255, 255, 0.3);
		margin: 16px;
	}

	.mainView {
		margin: 0px;
		paddingTop: 0px;
		background: #fff;
		overflow: scroll;
		overflow-x: hidden;
    border-left:solid #8e8e8f 1px;
	}

	.site-layout .site-layout-background {
		background: #fff;
	}
  .aLayLight{
    position: absolute;
    font-size:18px;
    color: #1f1f20;
    background-color: rgb(253, 253, 254);
    width: 100%;
    height: 40px;
    align-self: flex-end;
  }
  .aLay{
    position: absolute;
    font-size:18px;
    color:#a6adb4;
    background-color: rgba(0,21,41,0.01);
    width: 100%;
    height: 40px;
    align-self: flex-end;
  }
</style>